import React, { memo, useState } from 'react'
import {Space,Input,Tag} from "antd"
//Form表单会自动传入参数
const AgeRange = memo((props) => {
  //从props中解构出来数据和方法
  const {value = ["",""],onChange} = props
  //设置为响应式变量
  const [currentValue,setCurrentValue] = useState(value)
  //开始年龄输入框的change函数
  let fromChange = (e)=> {
    //获取到输入的内容
    const newValue = [e.target.value,currentValue[1]]
    //修改响应式变量
    setCurrentValue(newValue)
    //将新的value值传递出去
    onChange(newValue)
  }
  //结束年龄输入框的change函数
  let toChange = (e)=> {
    //获取到输入的内容
    const newValue = [currentValue[0],e.target.value]
    //修改响应式变量
    setCurrentValue(newValue)
    //将新的value值传递出去
    onChange(newValue)
  }
  return (
    <div>
      <Space.Compact>
          <Input
          //前方提示文字
          prefix={<Tag color="#2db7f5">从</Tag>}
          //输入框的值
          value={currentValue[0]}
          //后方提示文字
          suffix={<Tag color="#108ee9">元</Tag>}
          onChange={fromChange}
          ></Input>
          <Input
          //前方提示文字
          prefix={<Tag color="#2db7f5">到</Tag>}
          //输入框的值
          value={currentValue[1]}
          //后方提示文字
          suffix={<Tag color="#108ee9">元</Tag>}
          onChange={toChange}
          ></Input>
      </Space.Compact>
    </div>
  )
})

export default AgeRange